<template>
  <div class="pieChartEcahrts-box">
    <!-- 教师比例图 -->
    <div
      ref="myChartsRef"
      :style="{ height: height, width: width }"
      class="echarts"
    ></div>
  </div>
</template>
<script setup>
import { nextTick, watch, ref, onMounted } from "vue"
import nanshengTu from "@/assets/PersonnelMaterials/NAN_1@2x.png"
import nvshengTu from "@/assets/PersonnelMaterials/NV_1@2x.png"
import nanshengTu1 from "@/assets/PersonnelMaterials/NAN_2@2x.png"
import nvshengTu1 from "@/assets/PersonnelMaterials/NV_2@2x.png"
const emit = defineEmits(["click_Fun"])
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties

const props = defineProps({
  width: {
    default: "100%",
    type: String
  },
  height: {
    default: "100%",
    type: String
  },
  sexRatioList: {
    type: Object
  }
})

const myChartsRef = ref()

// 渲染echarts
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(myChartsRef.value)
  if (myChart) {
    myChart.dispose()
  }
  myChart = $echarts.init(myChartsRef.value)

  let sexRatioList = props.sexRatioList

  let nansheng = "image://" + nanshengTu
  let nansheng1 = "image://" + nanshengTu1
  let nvsheng = "image://" + nvshengTu
  let nvsheng1 = "image://" + nvshengTu1

  let option = {
    grid: {
      containLabel: true,
      left: "0%",
      top: "50%",
      bottom: "0%",
      right: "0%"
    },
    xAxis: {
      // max: 100,
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: "category",

      inverse: false,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,

        fontSize: 20,
        color: "red"
      }
    },
    series: [
      {
        type: "pictorialBar",
        symbolRepeat: "fixed",
        symbolMargin: "2",
        symbolClip: true,
        symbolSize: [10, 30],
        symbolPosition: "start",
        data: [
          {
            value: sexRatioList.value,
            symbol: sexRatioList.name == "男士" ? nansheng : nvsheng
          }
        ],
        z: 10
      },
      {
        type: "pictorialBar",
        animationDuration: 0,
        symbolRepeat: "fixed",
        symbolMargin: "2",
        symbolSize: [10, 30],
        symbolPosition: "start",

        data: [
          {
            value: 100,
            symbol: sexRatioList.name == "男士" ? nansheng1 : nvsheng1
          }
        ]
      }
    ]
  }

  setTimeout(() => {
    myChart.resize()
  }, 1000)
  myChart.setOption(option)
}

onMounted(() => {
  // console.log(props.pieChartObj)
  // nextTick(() => {
  //   initEcharts()
  // })
  addEventListener("resize", () => {
    initEcharts()
  })
})

watch(
  () => props.sexRatioList,
  (val) => {
    nextTick(() => {
      initEcharts()
    })
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<style scoped lang="less">
.pieChartEcahrts-box {
  width: 100%;
  height: 100%;
  position: relative;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
